import {Link, Outlet, Route, useNavigate, useRoutes} from 'react-router-dom'

import routes from './router'

function App() {
  const navigate = useNavigate()
  return (
    <div className="App">
     {
      useRoutes(routes)
     }
     {
      <div>
        <Link to="/home">home</Link> 
        <Link to="/about">about</Link>
        <Link to="/picture">picture</Link>
        {/* <button onClick={e =>{navigate('/about')}}>about</button> */}
      </div>
     }
     {
      routes.map((route,index) => {
        return <li key={index}>{route.path} --- {route.meta?.title}</li>
      })
     }
    </div>
  );
}

export default App;
